<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search" @reset="changeBiz">
						<cl-filter label="所属事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="请选择"
								clearable
								filterable
								multiple
								collapse-tags
								@change="refresh()"
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<div>
						<el-button icon="el-icon-plus" type="primary" @click="openForm()">
							新增配置
						</el-button>
					</div>
				</el-row>
			</template>
			<el-row>
				<!-- 数据表格 -->
				<cl-table v-bind="table">
					<cl-empty slot="empty" />
					<template #column-opt="{ scope: { row } }">
						<div class="flex flex-align-start">
							<el-button type="danger" @click="openForm(true, row)"> 修改 </el-button>
							<el-button @click="remove(row)">
								删除
							</el-button>
							<el-button type="primary" @click="openTags(row)">深转标签</el-button>
						</div>
					</template>
				</cl-table>
			</el-row>
			<template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<zm-pagination />
				</el-row>
			</template>
		</cl-pagefull>
		<setting-form ref="form" @confirm="refresh" />
		<tag-list ref="tagList" @confirm="refresh" />
	</cl-crud>
</template>
<script>
import SettingForm from "./components/setting-form.vue";
import TagList from "./components/tag-list.vue";
import { apiHost } from "@/config/env";
let uri = new URL(apiHost);
export default {
	name: "WorkwechatSetting",
	components: {
		SettingForm,
		TagList
	},
	data() {
		return {
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [
					{
						type: "index",
						label: "#",
						width: 50,
						fixed: true
					},
					{
						label: "所属事业部",
						prop: "biz_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "品牌",
						prop: "bra_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "企业名称",
						prop: "wxk_name",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "企业ID", prop: "corpid", width: 160 },
					{
						label: "客户管理回调URL",
						prop: "wxk_customer_callback_url",
						minWidth: 140,
						formatter: row =>
							`${apiHost}/workwechatnotify?echostr=1&corpid=${row.corpid}`,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "自建应用AgentId",
						prop: "wxk_app_agent_id",
						minWidth: 130,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "授权登录回调域",
						prop: "wxk_app_domain",
						width: 180,
						formatter: () => uri.hostname
					},
					{ label: "公众号AppId", prop: "wxk_public_app_id", width: 160 },
					{ label: "操作", prop: "opt", width: 240, fixed: "right" }
				]
			},
			search: {
				biz_id: "",
				bra_id: []
			}
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		this.init();
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.workwechat).done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh(reset = true) {
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
		},
		async init() {
			const { biz_id } = this.search;
			this.getBizRefBrand(biz_id);
		},
		changeBiz() {
			this.search.bra_id = [];
			this.init();
			this.refresh();
		},
		// 打开表单
		openForm(editing = false, data = {}) {
			this.$refs.form.open(editing, data);
		},
		openTags(data) {
			this.$refs.tagList.open(data);
		},
		// 删除
		remove({ id }) {
			this.confirm()
				.then(async () => {
					await this.$service.workwechat.remove({ id });
					this.$message.success("操作成功");
					this.refresh();
				})
				.catch(() => {});
		}
	}
};
</script>
<style lang="scss" scoped></style>
